<template>
  <el-scrollbar height="100vh">
    <div class="screenIndex">
      <div class="screenIndex--main">
        <barracksIndex v-if="tabName === 'barracks'"></barracksIndex>
        <warehouse-index v-else></warehouse-index>
      </div>
      <div class="screenIndex--header">
        <div class="screenIndex--header__label">长沙场站军械股</div>
        <div class="screenIndex--header__tabs" :class="[tabName === 'barracks' ? '' : 'two']">
          <div class="tab" :class="[{active: tabName === 'barracks'}]" @click="changeTab('barracks')">
            综合平台
          </div>
          <div class="tab" :class="[{active: tabName === 'warehouse'}]" @click="changeTab('warehouse')">
            通行巡更
          </div>
        </div>
        <!--左边飞机动画-->
        <div class="screenIndex--header__leftplane">
          <div class="img"></div>
        </div>
        <!--右侧飞机动画-->
        <div class="screenIndex--header__rightplane">
          <div class="img"></div>
        </div>
        <div class="screenIndex--header__date">
          <DateTime></DateTime>
        </div>
      </div>
    </div>
  </el-scrollbar>
</template>

<script setup>
import { provide } from 'vue'
import DateTime from '@/views/armyScreen/comp/DateTime.vue'
import barracksIndex from '@/views/armyScreen/barracks/leftNew/barracksLeftIndexNew.vue'
import warehouseIndex from '@/views/armyScreen/warehouse/warehouseIndex.vue'
import {ElScrollbar} from 'element-plus'
import {baseInfo, queryInterfaceLoopPeriod} from "@/api/armyScreenApi";
import bgBarracks from '@/assets/images/armyScreen/切图-bg@1x.png'
import $bus from '@/util/bus.js'
import { useWebSocket } from '@vueuse/core'
import '@/assets/mock/armyScreenMock.js'

const ipPort = import.meta.env.DEV ? '10.192.195.225' : window.location.host
// const wsUrl = `${location.protocol === 'http:' ? 'ws://' : 'wss://'}${ipPort}/csjzzav/realtime/alarm`
const wsUrl = `${location.protocol === 'http:' ? 'wss://' : 'wss://'}${ipPort}/csjzzav/realtime/alarm`
console.log('wsUrl', wsUrl)
const warnInfo = ref(null)
provide('warnInfo', warnInfo)
/**
 * status 是连接的状态值
 * data 是 socket 推送过来的消息
 * send 是一个方法， 用来发送消息给后台
 * close 是一个方法，关闭 socket 连接
 * open 。。。不知道
 */
const { status, data, send, open, close  } = useWebSocket(wsUrl, {
  onConnected: function (ws) {},
  onDisconnected: function (ws, event) {},
  onError: function (ws, event) {},
  onMessage: function (ws, event) {
    if (event.data) {
      const info = JSON.parse(event.data)
      console.log(info)
      warnInfo.value = info
    }
  },
  heartbeat: true,
  autoReconnect: true,
  autoClose: true,
})


onMounted(() => {
  loopRequest() // 定时刷新数据的请求
  // baseInfoService()
})
onBeforeUnmount(() => {
  if (timer) {
    clearInterval(timer)
  }
})


const tabName = ref('barracks') // 默认是兵营
// const tabName = ref('warehouse') // 默认是 智慧军械库

// /*监听tab页签的变化，改变不同的背景*/
// watch(tabName, function (newValue) {
//   // if (newValue === 'barracks') {
//   //   // mapUrl.value = `--bgUrl: url('@/assets/images/armyScreen/切图-bg@1x.png')` // 错误写法
//   //   mapUrl.value = `--bgUrl: url('${bgBarracks}')`
//   // } else {
//   //   // mapUrl.value = `--bgUrl: url('${bgwarehouse}')`
//   //   mapUrl.value = serverMapUrl.value
//   // }
// })

let loopTime = 30
let timer = null
/*定时刷新数据的请求*/
async function loopRequest(){
  const {data} = await queryInterfaceLoopPeriod()
  loopTime = data
  setInterval(() => {
    $bus.emit('reRequest') // 发送事件，要求重新发送请求
  },loopTime * 1000)
  // },5 * 1000)
}

function changeTab (tabNameStr) {
  tabName.value = tabNameStr
}

// const mapUrl = ref('')
// const serverMapUrl = ref('')
// function baseInfoService () {
//   baseInfo().then(res => {
//     console.log(res)
//     serverMapUrl.value = `--bgUrl: url(${res.data.mapUrl})`
//     if (tabName.value === 'warehouse') {
//       mapUrl.value = serverMapUrl.value
//     }
//   })
// }

</script>

<style scoped lang="scss">
.screenIndex {
  --bgUrl: url('@/assets/images/armyScreen/切图-bg@1x.png');
  position: relative;
  width: 1920px;
  height: 1080px;
  min-height: 1080px;
  background-image: var(--bgUrl);
  background-size: cover;
  &--header {
    width: 1920px;
    height: 60px;
    background-size: cover;
    line-height: 60px;
    pointer-events: none;
    position: absolute;
    top: 0;
    &__label{
      text-align: center;
      font-family: FZLTTHK--GBK1-0;
      font-size: 36px;
      color: #E8F6FE;
      letter-spacing: 4px;
      text-align: center;
      text-shadow: 0 2px 2px rgba(0,0,0,0.94);
      font-weight: 800;
    }
    &__tabs{
      pointer-events: all;
      width: 212px;
      height: 32px;
      background-image: url('@/assets/images/armyScreen/左上角点击1@2x.png');
      background-size: cover;
      position: absolute;
      bottom: 0;
      left: 28px;
      &.two{
        background-image: url('@/assets/images/armyScreen/左上角点击2@2x.png');
      }

      .tab{
        display: inline-block;
        width: 106px;
        height: 32px;
        cursor: pointer;
        line-height: 32px;
        position: relative;
        top: -14px;

        font-family: PingFangSC-Regular;
        font-size: 16px;
        color: rgba(232, 246, 254, 0.8);
        letter-spacing: 1.78px;
        text-align: center;
        font-weight: 400;
        &.active{
          font-family: PingFangSC-Semibold;
          font-size: 18px;
          color: #E8F6FE;
          letter-spacing: 2px;
          text-align: center;
          text-shadow: 0 1px 2px rgba(0,0,0,0.89);
          font-weight: 600;
        }
      }
    }
    &__leftplane{
      width: 516px;
      height: 72px;
      //background-image: url('@/assets/images/armyScreen/头部左侧入场动画@2x.png');
      //background-size: cover;
      position: absolute;
      left: 144px;
      top: -12px;
      overflow: hidden;
      animation:myleftplane 3s; // 动画效果
      .img{
        height: 100%;
        background-image: url('@/assets/images/armyScreen/头部左侧入场动画@2x.png');
        background-size: cover;
      }
    }
    &__rightplane{
      width: 516px;
      height: 72px;
      //background-image: url('@/assets/images/armyScreen/头部左侧入场动画@2x.png');
      //background-size: cover;
      position: absolute;
      right: 144px;
      top: -12px;
      overflow: hidden;
      animation:myrgihtplane 3s; // 动画效果
      .img{
        height: 100%;
        background-image: url('@/assets/images/armyScreen/头部右侧入场动画@2x.png');
        background-size: cover;
      }
    }
    &__date{
      pointer-events: all;
      position: absolute;
      right: 62px;
      top: 12px;
    }
  }
  &--main{
    padding-top: 60px;
  }
}
</style>
<style>
@keyframes myleftplane
{
  from {left: -250px;}
  to {left: 144px;}
}

@keyframes myrgihtplane /* Safari 与 Chrome */
{
  from {right: -250px;}
  to {right: 144px;}
}
</style>
